<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style type="text/css">
    html,
    body {
        background-color: #080915;
    }

    .loading1 {
        position: absolute;
        left: 10px;
        top: 10px;
        width: 50px;
        height: 50px;
        background-color: #ed5565;
    }

    .loading {
        width: 10px;
        height: 10px;
        display: inline-block;
        margin: 0;
        border-radius: 50%;
        position: absolute;
        background-color: #fff;
        -webkit-animation: load 0.5s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
        animation: load 0.5s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
    }

    .b1 {
        animation-delay: -0.5s;
        left: 5px;
    }

    .b2 {
        animation-delay: -0.2s;
        left: 20px;
    }

    .b3 {
        animation-delay: 0s;
        left: 35px;
    }

    @keyframes load {
        from {
            top: 10px;
        }

        to {
            top: 20px;
        }
    }

    @-webkit-keyframes load {
        from {
            top: 10px;
        }

        to {
            top: 20px;
        }
    }

    .loading2 {
        position: absolute;
        top: 10px;
        left: 80px;
        background-color: #ed5565;
        width: 60px;
        height: 40px;
        padding-top: 10px;
    }

    .loading2 div {
        width: 4px;
        height: 10px;
        background-color: #fff;
        display: inline-block;
        margin-left: 2px;
        animation: load2 0.5s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
        -webkit-animation: load2 0.5s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
    }

    .loading2 div:nth-child(1) {
        animation-delay: -0.5s;
    }

    .loading2 div:nth-child(2) {
        animation-delay: -0.4s;
    }

    .loading2 div:nth-child(3) {
        animation-delay: -0.3s;
    }

    .loading2 div:nth-child(4) {
        animation-delay: -0.2s;
    }

    .loading2 div:nth-child(5) {
        animation-delay: -0.1s;
    }

    @keyframes load2 {
        from {
            transform: scaleY(1);
        }

        to {
            transform: scaleY(3);
        }
    }

    @-webkit-keyframes load2 {
        from {
            transform: scaleY(1);
        }

        to {
            transform: scaleY(3);
        }
    }
</style>
</head>

<body>
    <div class="loading1">
        <div class="loading b1"></div>
        <div class="loading b2"></div>
        <div class="loading b3"></div>
    </div>
    <div class="loading2">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

</html>